<template>
    <div>
      <table-expand
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :additionalAction="additionalAction"
        :action="action"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-expand>
      <edit-modal
        v-bind="editPanel"
        :modelType="modelType"
        :columns="editColumns"
        :rules="rules"
        @submit="handleEditSubmit"
      ></edit-modal>
      <read-modal
        v-bind="readPanel"
        :modelType="modelType"
        :columns="columns"
        :rules="rules"
      ></read-modal>
    </div>
</template>

  <script>
    import editModal from '@/pages/components/editModal.vue';
    import readModal from '@/pages/components/readModal.vue';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
    import columnsMixin from './config'
    import tableExpand from '@/pages/components/tableExpand.vue';
    import intervalConfig from "@/pages/config/intervalConfig"
    export default {
        components: { editModal,readModal,tableExpand },
        name: 'energyAlarm',
        mixins: [mixin, columnsMixin],
        data () {
            return {
                classObject: null, // 单个实例
                collectionObject: null, // 所有实例
                typeOptions: [], // 告警类型下拉框
                typeClassObject: null, // 告警类型实例
                className: typeClassName['energyAlarm'].className,
                type: typeClassName['energyAlarm'].type,
                modelType: typeClassName['energyAlarm'].modelType,
                addNewPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                rules: {
                  //   sf_energyCode: [
                  //       { required: true, message: '不能为空', trigger: 'blur' }
                  //   ],
                  //   sf_energyName: [
                  //       { required: true, message: '不能为空', trigger: 'blur' }
                  //   ],
                },
                loading: false,
                config: {
                    search: true,
                    addButton: false,
                    batchDeleteButton: false,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: true,
                    additionalAction: true
                },
                action: {
                    edit: false,
                    delete: false,
                    detail: true
                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
                statusOptions:[
                  {label:'发生',value:'1'},
                  {label:'获知',value:'2'},
                  {label:'已处理',value:'3'},
                ],
                timer:null,
            };
        },
        computed: {
            additionalAction () {
                let additionalAction =  {
                    key: 'additionalAction',
                    title: {
                        'zh-CN': '附加操作',
                        'en-US': 'additional action'
                    }[this.G_Locale],
                    slot: 'additionalAction',
                    width: 200,
                    fixed: 'right',
                    align: 'center',
                    show: true,
                    buttons: [
                        {
                            title: {
                                'zh-CN': '修改状态',
                                'en-US': 'bind equipment'
                            }[this.G_Locale],
                            event: (row, index) => this.handleEdit(row, index)
                        }
                    ]
                };
                this.G_IsMobile && (additionalAction.width = 90)
                return additionalAction;
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        return {
                            ...d,
                            ...d.values
                        }
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            this.classObject = this.$modelObject.create(this.modelType);
            this.typeClassObject = this.$modelObject.create(`${typeClassName['energyType'].modelType}`);
            this.setOptionsByHier('energyType', this.typeClassObject, 'typeOptions', {
                label: 'sf_name', value: 'sf_code'
            })
            this.loadPage(this.pageNavigation, null);
        },
        mounted () {
         //定时请求
         if(this.timer){
            clearInterval(this.timer)
         }else{
            this.timer = setInterval(()=>{
               this.loadPage(this.pageNavigation, null);
            },intervalConfig.alarmInterval)
         }
        },
        beforeDestroy(){
            this.timer && clearInterval(this.timer)
        },
        methods: {
            loadPage (pageNavigation, filter, orderBy={}) {
                //删除查询项中属性值为空的查询条件
                this.tools.deleteInvalid(filter)
                filter = {
                    className: this.className,
                    type: this.type,
                    ...filter,
                    ...this.selfFilter // 页面本身写死的筛选条件
                }
                //区间查询
                let betweenFilter = ''
                Object.keys(filter).map(key=>{
                    if(Array.isArray(filter[key])){
                        (filter[key][0]!==''||filter[key][1]!=='') && (betweenFilter=`&& ${key} between '${filter[key][0]}' and '${filter[key][1]}'`)
                        delete filter[key]
                    }
                })
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = this.collectionObject.util.getFilter(filter);
                    newFilter += betweenFilter;
                }
               //  this.loading = true;
                this.collectionObject
                    .queryByPage(
                        pageNavigation.pageNumber,
                        pageNavigation.pageSize,
                        newFilter,
                        orderBy
                    )
                    .then((flag) => {
                        if (flag) {
                            this.pageNavigation.total = this.collectionObject.total;
                           //  this.loading = false;
                        } else {
                           //  this.loading = false;
                        }
                });
            },
            getCellBg (status) {
                switch (status) {
                case '橙色':
                    return 'warning';
                case '红色':
                    return 'error';
                case '蓝色':
                    return 'primary';
                default:
                    return 'default';
                }
            },
        }
    };
  </script>
  <style scoped lang="scss"></style>
